<template>
    <el-header :style="{background:bg.bgColor}" >
        <!-- 头部整体盒子 -->
        <el-row :gutter="10" class="head">
            <el-col :xs="4" :sm="8" :md="8" :lg="8" :xl="12">
                <div class="logo ">

                </div>
            </el-col>
            <el-col :xs="16" :sm="12" :md="12" :lg="12" :xl="12" >

                    <el-menu
                            :default-active="activeIndex2"
                            class="el-menu-custom inner"
                            mode="vertical"
                            :collapse="true"
                            @select="handleSelect"
                            :background-color="bg.bgColor"
                            :text-color="bg.textColor"
                            :active-text-color="bg.activeColor">
                        <el-submenu v-for="(item,index) in nav"  :index="index" >
                            <template slot="title">{{item.catname}}</template>
                            <el-menu-item v-for="(it,ind) in item.children" :index="index+'_'+ind">{{it.catname}}</el-menu-item>
                        </el-submenu>
                        <el-menu-item index="-2">
                            <template>
                                <i class="el-icon-search" @click="search"></i>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="-3">
                            <template>
                                <i class="el-icon-user" @click="search"></i>
                                登录/注册
                            </template>
                        </el-menu-item>
                    </el-menu>
            </el-col>
        </el-row>
        <Search :isShow="isShowSearch"></Search>
    </el-header>
</template>
<script>
  import Search from '../article/search.vue'
  import {treeDataTranslate} from '@/utils'
  export default {
    name: 'Head',
    components: {
      Search
    },
    data () {
      return {
        isShow: false,
        nav: [],
        navIndex: 0,
        bg: {
          bgColor: '#FFFFFF',
          textColor:'#9A9DA2',
          activeColor:'#2C3E50'
        },
        direction: 'rtl',
        isShowSearch: false,//是否显示搜索栏
        defaultProps: {
          children: 'parent',
          label: 'catname'
        }
      }
    },
    mounted () {
      this.getNav()
    },
    methods: {

      handleClose () {
        this.isShow = false
      },
      /**
       * 显示导航
       * */
      showNav () {
        this.isShow = true
      },
      /**
       * 获取导航条
       */
      getNav () {
        console.log('get nav')
        this.$http({
          url: 'category',
          method: 'get'
        }).then(res => {
          console.log('r', res)
          if (res.code == 200) {
            this.nav = treeDataTranslate(res.data, 'catid', 'parentid')
          }
        })
      },
      jumpTo (command) {
        console.log('跳转')
        switch (command.parentid) {
          case 6:
            window.open(command.pclink)
            break
        }
      },

      /**
       * 跳转
       */
      jump (index) {
        this.navIndex = index
      },
      /**
       * 搜索
       */
      search () {
        (this.isShowSearch) ? (() => {
          this.isShowSearch = false
        })() : (() => {
          this.isShowSearch = true
        })()
      }
    }
  }
</script>
<style>
    @import "../../assets/thems/css/style.css";

    .head{
        width: 100%;
        overflow: hidden;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .el-header {
        padding: 0;
    }
    .el-menu.el-menu--horizontal{
        border: none !important;
    }
    .el-menu-custom {
        display: flex;
        align-items: center;
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .custom-logo {
        position: absolute;
        left: 0;
    }

    .slide-in-right {
        -webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    @-webkit-keyframes slide-in-right {
        0% {
            -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes slide-in-right {
        0% {
            -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    }

    .menu-item a {
        text-decoration: none;
        cursor: pointer;
    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

</style>


